/* eslint-disable react/prop-types */
import React from 'react';
import {Form, Input, Button, Upload, Icon} from 'antd';
import UEditor from '@/components/ueditor/index'

class ExampleForm extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            value: '',
            ueditor:null
        }
    }

    componentDidMount() {
    }

    handleSubmit = e => {
        e.preventDefault();
        const editor = this.state.ueditor
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                let content = editor.getContent();
                let params = Object.assign({},values,{content:content});
                console.log('Received values of form: ', params);
            }
        });
    };
    normFile = e => {
        console.log('Upload event:', e);
        if (Array.isArray(e)) {
            return e;
        }
        return e && e.fileList;
    };

    render() {
        const {getFieldDecorator} = this.props.form;

        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 4},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 20},
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 20,
                    offset: 4,
                },
            },
        };

        return (
            <Form {...formItemLayout} onSubmit={this.handleSubmit}>
                <Form.Item label="名称">
                    {getFieldDecorator('name', {
                        rules: [
                            {
                                required: true,
                                message: '请输入名称',
                            },
                        ],
                    })(<Input placeholder='名称'/>)}
                </Form.Item>
                <Form.Item label="应用场景">
                    {getFieldDecorator('scape', {
                        rules: [
                            {
                                required: true,
                                message: '请输入应用场景',
                            },
                        ],
                    })(<Input placeholder='场景'/>)}
                </Form.Item>
                <Form.Item label="附件上传" extra="请上传格式为zip的文件">
                    {getFieldDecorator('dragger', {
                        valuePropName: 'fileList',
                        getValueFromEvent: this.normFile,
                    })(
                        <Upload.Dragger name="files" action="/upload.do" style={{width:'50%'}}>
                            <p className="ant-upload-drag-icon">
                                <Icon type="inbox"/>
                            </p>
                            <p className="ant-upload-text">点击或拖动文件上传</p>
                            <p className="ant-upload-hint">支持单次或批量上传</p>
                        </Upload.Dragger>,
                    )}
                </Form.Item>
                <Form.Item label="插件描述">
                    <UEditor id='richText' name="richText"></UEditor>
                </Form.Item>
                <Form.Item {...tailFormItemLayout} style={{marginTop: '30px', textAlign: 'center'}}>
                    <Button className="submit_btn" type="default">取消</Button>
                    <Button className="submit_btn" type="primary" htmlType="submit">确定</Button>
                </Form.Item>
            </Form>
        );
    }
}

export default Form.create()(ExampleForm);
